<template>
  <!-- 维修领料 -->
  <div>
    <!-- 表单 -->
    <FormPanel ref="form" :cols="4" :list="list" :isSubmitBtn="false" @formChange="formChange"></FormPanel>
    <!-- 表格 -->
    <FilterTable ref="table" :height="250" :columns="columns" :fetchapi="fetchApi" :params="fetchParams" :onColumnsChange="columns => (this.columns = columns)"></FilterTable>
    <!-- 表单2 -->
    <div style="margin-top: 40px;">
      <FormPanel ref="form2" :cols="3" :list="list2" :isSubmitBtn="false" @formChange="formChange2"></FormPanel>
    </div>
    <!-- 表格地址 -->
    <div class="btn-group-wrap">
      <el-button size="small">关单</el-button>
      <el-button size="small">新增</el-button>
      <el-button size="small">退料</el-button>
      <el-button size="small">借料与预留</el-button>
      <el-button size="small">修理项目</el-button>
      <el-button size="small">编辑</el-button>
      <el-button size="small">保存</el-button>
      <el-button size="small">出库</el-button>
      <el-button size="small">取消</el-button>
      <el-button size="small">打印发料单</el-button>
      <el-button size="small">重打发料单</el-button>
    </div>
    <!-- 抽屉组件 或者 弹窗 -->
    <div class>
      <Drawer :visible.sync="showGdcx" title="" destroyOnClose>
        <Gdxz @confirmGdcx="confirmGdcx" @cancelGdcx="cancelGdcx"></Gdxz>
      </Drawer>
    </div>
  </div>
</template>

<script>
import { testApi, queryMaintainPicking } from '@/pages/repair/order/repairMaterials/api/index.js';
import util from './common/util';
import Gdxz from './components/gdcx';

export default {
  name: 'wxll',
  components: {
    Gdxz
  },
  data() {
    return {
      // 表单
      list: this.createList(),
      // 表格
      columns: this.createColumns(),
      fetchApi: queryMaintainPicking,
      fetchParams: { xhrAbort: true },
      onChangeColumn: [],
      // 表单2
      list2: this.createList2(),
      //  弹窗
      showGdcx: false
    };
  },
  mounted() {
    testApi();
  },
  methods: {
    createList() {
      return [
        {
          type: 'INPUT',
          label: '工单号',
          fieldName: 'roNo',
          unitRender: () => {
            return <el-button icon="el-icon-search" onClick={this.gdClickHandle}></el-button>;
          },
          onEnter: val => {
            // this.WorkSearch_rono = val;
            this.gdClickHandle();
          },
          placeholder: ''
        },
        {
          type: 'INPUT',
          label: '车牌号',
          fieldName: 'license',
          placeholder: 'license'
        },
        {
          type: 'SELECT',
          label: '工单类型',
          fieldName: 'roType',
          placeholder: '请选择...',
          itemList: []
          // rules: [{ required: true, message: '请选择维修类型', trigger: 'change' }]
        },
        {
          type: 'SELECT',
          label: '维修类型',
          fieldName: 'repairTypeCode',
          placeholder: '请选择...',
          itemList: []
          // rules: [{ required: true, message: '请选择维修类型', trigger: 'change' }]
        },
        {
          type: 'SELECT',
          label: '车型',
          fieldName: 'model',
          placeholder: '请选择...',
          itemList: []
          // rules: [{ required: true, message: '请选择维修类型', trigger: 'change' }]
        },
        {
          type: 'INPUT',
          label: '服务工程师',
          fieldName: 'serviceAdvisor',
          placeholder: ''
        },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'vin',
          placeholder: ''
        },
        {
          type: 'INPUT',
          label: '车主',
          fieldName: 'ownerName',
          placeholder: ''
        },
        {
          type: 'INPUT',
          label: '开单日期',
          fieldName: 'roCreateDate',
          placeholder: ''
        },
        {
          type: 'INPUT',
          label: '责任技师',
          fieldName: 'chiefTechnician',
          placeholder: ''
        },
        {
          type: 'INPUT',
          label: '排量',
          fieldName: 'pailiang',
          placeholder: ''
        }
      ];
    },
    createColumns() {
      return [
        {
          title: '序号',
          // sorter: true,
          dataIndex: ''
        },
        {
          title: '操作',
          // sorter: true,
          dataIndex: ''
        },
        {
          title: '是否入账',
          // sorter: true,
          dataIndex: ''
        },
        {
          title: '活动编号',
          // sorter: true,
          dataIndex: ''
        },
        {
          title: '仓库',
          // sorter: true,
          dataIndex: ''
        },
        {
          title: '库位代码',
          // sorter: true,
          dataIndex: ''
        },
        {
          title: '主要备件',
          // sorter: true,
          dataIndex: ''
        },
        {
          title: '备件代码',
          // sorter: true,
          dataIndex: ''
        },
        {
          title: '备件名称',
          // sorter: true,
          dataIndex: ''
        },
        {
          title: '单位',
          // sorter: true,
          dataIndex: ''
        },
        {
          title: '数量',
          // sorter: true,
          dataIndex: ''
        }
      ];
    },
    createList2() {
      return [
        {
          type: 'INPUT',
          label: '车牌号',
          fieldName: '',
          placeholder: ''
        },
        {
          type: 'INPUT',
          label: '车牌号',
          fieldName: '',
          placeholder: ''
        },
        {
          type: 'INPUT',
          label: '车牌号',
          fieldName: '',
          placeholder: ''
        },
        {
          type: 'INPUT',
          label: '车牌号',
          fieldName: '',
          placeholder: ''
        },
        {
          type: 'INPUT',
          label: '车牌号',
          fieldName: '',
          placeholder: ''
        }
      ];
    },
    formChange(val) {
      // console.log('formChange', val);
      const params = Object.assign({}, val, { offset: 0, xhrAbort: false });
      console.log('维修领料查询 formChange', params);
      this.fetchParams = params;
    },
    formChange2(val) {
      console.log('formChange', val);
    },
    // 工单号 点击搜索
    gdClickHandle() {
      console.log('工单号 点击搜索');
      this.showGdcx = true;
    },
    //  确认
    confirmGdcx(obj) {
      this.showGdcx = false;
      this.queryMaintainPicking(obj);
    },
    //  关闭
    cancelGdcx() {
      this.showGdcx = false;
    },
    // 查询维修领料
    async queryMaintainPicking(obj) {
      console.log('查询 维修领料', obj);
      // 界面赋值
      this.list.forEach((item, i) => {
        item.initialValue = obj[item.fieldName];
      });
      this.$refs.form.SUBMIT_FORM();
      return;
      const res = await queryMaintainPicking(obj);
      // const res = await queryMaintainPicking({
      //   sort: 'ITEM_ID',
      //   order: 'asc',
      //   series: 'WSPAD-CC9-2015-LincolnMKZCHN',
      //   brand: 'LINCOLN',
      //   undefined: '12781002',
      //   roNo: 'RO1908220011',
      //   license: '陕A2FU00',
      //   repairTypeCode: 'BPZF',
      //   model: 'WSPAD-CC9-2015-LincolnMKZCHN-YZBAF',
      //   serviceAdvisor: 'JT02',
      //   vin: '09876543219876543',
      //   ownerName: '宁',
      //   roCreateDate: '2019-08-22 17:51',
      //   cxCurrencyEditDiscount: '1',
      //   maintainPickingTbl: '',
      //   dmsFuncId: '30151000',
      //   _: '1566479566279'
      // });
      // 查询结果
      console.log(res);
    }
  }
};
</script>

<style lang="less" scoped>
.btn-group-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  margin-bottom: 100px;
}
</style>
